<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../img/favicon.ico" />
    <title>列表</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../font_ylp5j2ulmh/iconfont.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/right_sidebar.css">
    <link rel="stylesheet" href="../font_le5z9lzqv9s/iconfont.css">
    <link rel="stylesheet" href="../font_5w5hxztpej7/iconfont.css"></head>
<body>


    <!-- ----------------------头部------------- -->
    <header>

    </header>
    <!-- 列表选项框 -->
    <div class="bg_grey">
        <div id="list_select">
            <div class="mainCon list_select">
                <div class="select_left">
                    <ul>
                        <li>
                            <span>品牌</span>
                        </li>
                        <li>
                            <span>适合人群</span>
                        </li>
                        <li>
                            <span>镜片颜色</span>
                        </li>
                        <li>
                            <span>镜框宽</span>
                        </li>
                        <li>
                            <span>镜片宽</span>
                        </li>
                        <li>
                            <span>镜片高</span>
                        </li>
                        <li>
                            <span>镜腿长</span>
                        </li>
                        <li>
                            <span>材质</span>
                        </li>
                    </ul>
                </div>
                <div class="select_right">
                    <ul>
                        <li class="pic">
                            <a href="javascript:;">
                                <div class="show">
                                    <img src="../img/10000.png" alt="">
                                </div>
                                <div class="hidden" style="display: none;">
                                    <p>OULE</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">儿童</a>
                            <a href="javascript:;">女士</a>
                            <a href="javascript:;">男士</a>
                        </li>
                        <li>
                            <a href="javascript:;">枪色</a>
                            <a href="javascript:;">灰色</a>
                            <a href="javascript:;">粉色</a>
                            <a href="javascript:;">紫色</a>
                            <a href="javascript:;">红色</a>
                            <a href="javascript:;">绿色</a>
                            <a href="javascript:;">蓝色</a>
                            <a href="javascript:;">银色</a>
                            <a href="javascript:;">黄棕色</a>
                            <a href="javascript:;">黑色</a>
                        </li>
                        <li>
                            <a href="javascript:;">129mm-135mm</a>
                            <a href="javascript:;">135mm-141mm</a>
                            <a href="javascript:;">141mm-147mm</a>
                            <a href="javascript:;">147mm-153mm</a>
                            <a href="javascript:;">153mm-159mm</a>
                        </li>
                        <li>
                            <a href="javascript:;">46mm-51mm</a>
                            <a href="javascript:;">51mm-56mm</a>
                            <a href="javascript:;">56mm-61mm</a>
                            <a href="javascript:;">61mm-66mm</a>
                            <a href="javascript:;">66mm-71mm</a>
                        </li>
                        <li>
                            <a href="javascript:;">38mm-43mm</a>
                            <a href="javascript:;">43mm-48mm</a>
                            <a href="javascript:;">48mm-53mm</a>
                            <a href="javascript:;">53mm-58mm</a>
                            <a href="javascript:;">58mm-63mm</a>
                        </li>
                        <li>
                            <a href="javascript:;">127mm-134mm</a>
                            <a href="javascript:;">134mm-141mm</a>
                            <a href="javascript:;">141mm-148mm</a>
                            <a href="javascript:;">148mm-155mm</a>
                            <a href="javascript:;">155mm-162mm</a></li>
                        <li>
                            <a href="javascript:;">TR90</a>
                            <a href="javascript:;">金属合金</a>
                            <a href="javascript:;">钛合金</a>
                            <a href="javascript:;">镁铝合金</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="comm_1"></div>
        <div id="comm_2" style="display: none;"></div>
        <div id="comm_3" style="display: block;">
            <span>
                <input type="button" onclick="this.value==='点击收起'?this.value='查看更多':this.value='点击收起';show_brief();" value="查看更多" name=botton>
            </span>
        </div>
        <!-- 商品列表 -->
        <div class="goods_box">
            <div class="mainCon">
                <div id="filter">
                    <!-- 第一行 -->
                    <ul>
                        <li class="act">
                            <span>销量</span>
                            <div class="up_down">
                                <i class="iconfont icon-top-line"></i>
                                <i class="iconfont icon-below-line"></i>
                            </div>
                        </li>
                        <li>
                            <span>上架时间</span>
                            <div class="up_down">
                                <i class="iconfont icon-top-line"></i>
                                <i class="iconfont icon-below-line"></i>
                            </div>
                        </li>
                        <li>
                            <span>价格</span>
                            <div class="up_down">
                                <i class="iconfont icon-top-line"></i>
                                <i class="iconfont icon-below-line"></i>
                            </div>
                        </li>
                        <li>
                            <span>人气</span>
                            <div class="up_down">
                                <i class="iconfont icon-top-line"></i>
                                <i class="iconfont icon-below-line"></i>
                            </div>
                        </li>
                        <li>
                            <span>更新</span>
                            <div class="up_down">
                                <i class="iconfont icon-top-line"></i>
                                <i class="iconfont icon-below-line"></i>
                            </div>
                        </li>
                    </ul>
                    <!-- 第二行 -->
                    <!-- <div class="sum">
                        <div class="fl">
                            <span>共有<b>111</b>个商品</span></div>
                        <div class="fr">
                            <span>1</span>/<span>10</span>
                            <i class="iconfont icon-zuo"></i>
                            <i class="iconfont icon-you"></i>
                        </div>
                    </div> -->
                </div>
                <div class="goods_wrap">
                    <div id="container">
                        <section class="tab">
                            <div class="xuan">
                            <!-- <div class="goods_item">
                                    <div class="img_box">
                                        <div id="images">
                                            <section class="glasses">
                                                <img src="../img/10002.jpg" alt="">
                                            </section>
                                        <section class="glasses">
                                            <img src="../img/10009.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10010.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10011.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10012.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10013.jpg" alt="">
                                        </section>
                                    </div>
                                    </div>
                                    <div id="small_img">
                                    <ul>
                                        <li class="active">
                                            <img src="../img/10003.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10004.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10005.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10006.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10007.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10008.jpg" alt="">
                                        </li>
                                    </ul>
                                    </div>
                                    <div class="price_box">
                                    ￥<em>118</em>
                                    </div>
                                    <div class="pname">
                                    <h3>
                                        <a href="javascript:;">OULE 新款偏光太阳镜 男女飞行员潮流大框炫彩蛤蟆镜 黑灰...</a>
                                    </h3>
                                    </div>
                            </div> -->
                            </div>
                        <!-- 分页 -->
                        <div class="fenye">

                        </div>
                        </section>
                        
                        <section class="tab">
                            <div class="goods_item">
                                <div class="img_box">
                                    <div id="images">
                                        <section class="glasses">
                                            <img src="../img/10002.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10009.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10010.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10011.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10012.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10013.jpg" alt="">
                                        </section>
                                    </div>
                                </div>
                                <div id="small_img">
                                    <ul>
                                        <li class="active">
                                            <img src="../img/10003.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10004.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10005.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10006.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10007.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10008.jpg" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="price_box">
                                    ￥<em>118</em>
                                </div>
                                <div class="pname">
                                    <h3>
                                        <a href="javascript:;">OULE 新款偏光太阳镜 男女飞行员潮流大框炫彩蛤蟆镜 黑灰...</a>
                                    </h3>
                                </div>
                            </div>
                        </section>
                        <section class="tab tab1">
                            <div class="xuan1">
                            <!-- <div class="goods_item">
                                <div class="img_box">
                                    <div id="images">
                                        <section class="glasses">
                                            <img src="../img/10002.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10009.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10010.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10011.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10012.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10013.jpg" alt="">
                                        </section>
                                    </div>
                                </div>
                                <div id="small_img">
                                    <ul>
                                        <li class="active">
                                            <img src="../img/10003.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10004.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10005.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10006.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10007.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10008.jpg" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="price_box">
                                    ￥<em>118</em>
                                </div>
                                <div class="pname">
                                    <h3>
                                        <a href="javascript:;">OULE 新款偏光太阳镜 男女飞行员潮流大框炫彩蛤蟆镜 黑灰...</a>
                                    </h3>
                                </div>
                            </div> -->
                            </div>
                        <div class="fenye1"></div>
                        </section>
                        <section class="tab">
                            <div class="xuan2">
                                <!-- <div class="goods_item">
                                    <div class="img_box">
                                        <div id="images">
                                            <section class="glasses">
                                                <img src="../img/10002.jpg" alt="">
                                            </section>
                                            <section class="glasses">
                                                <img src="../img/10009.jpg" alt="">
                                            </section>
                                            <section class="glasses">
                                                <img src="../img/10010.jpg" alt="">
                                            </section>
                                            <section class="glasses">
                                                <img src="../img/10011.jpg" alt="">
                                            </section>
                                            <section class="glasses">
                                                <img src="../img/10012.jpg" alt="">
                                            </section>
                                            <section class="glasses">
                                                <img src="../img/10013.jpg" alt="">
                                            </section>
                                        </div>
                                    </div>
                                    <div id="small_img">
                                        <ul>
                                            <li class="active">
                                                <img src="../img/10003.jpg" alt="">
                                            </li>
                                            <li>
                                                <img src="../img/10004.jpg" alt="">
                                            </li>
                                            <li>
                                                <img src="../img/10005.jpg" alt="">
                                            </li>
                                            <li>
                                                <img src="../img/10006.jpg" alt="">
                                            </li>
                                            <li>
                                                <img src="../img/10007.jpg" alt="">
                                            </li>
                                            <li>
                                                <img src="../img/10008.jpg" alt="">
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="price_box">
                                        ￥<em>118</em>
                                    </div>
                                    <div class="pname">
                                        <h3>
                                            <a href="javascript:;">OULE 新款偏光太阳镜 男女飞行员潮流大框炫彩蛤蟆镜 黑灰...</a>
                                        </h3>
                                    </div>
                                </div> -->
                                </div>
                            <div class="fenye1"></div>
                        </section>
                        <section class="tab">
                            <div class="goods_item">
                                <div class="img_box">
                                    <div id="images">
                                        <section class="glasses">
                                            <img src="../img/10002.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10009.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10010.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10011.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10012.jpg" alt="">
                                        </section>
                                        <section class="glasses">
                                            <img src="../img/10013.jpg" alt="">
                                        </section>
                                    </div>
                                </div>
                                <div id="small_img">
                                    <ul>
                                        <li class="active">
                                            <img src="../img/10003.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10004.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10005.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10006.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10007.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="../img/10008.jpg" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="price_box">
                                    ￥<em>118</em>
                                </div>
                                <div class="pname">
                                    <h3>
                                        <a href="javascript:;">OULE 新款偏光太阳镜 男女飞行员潮流大框炫彩蛤蟆镜 黑灰...</a>
                                    </h3>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        
    <script src="../js/pagination.js"></script>
    <script src="../js/echo.min.js"></script>
    
    </div>


    <!-- --------------------尾部------------------ -->
    <footer>

    </footer>

    <!-- -------------------右侧固定栏------------- -->
    <div id="right">

    </div>
            <script src="../js/ajax.js"></script>
            <script src="../js/list.js"></script>
            <script src="../js/jquery-1.10.2/jquery.min.js"></script>
            <script src="../js/jquery-1.10.2/jquery.js"></script>
            <script src="../js/swiper.min.js"></script>
            
            


            <script>

                $('header').load('header.html');
                $('footer').load('footer.html');
                $('#right').load('right_sidebar.html');
                
            </script>
            <!-- <script src="../js/header.js"></script> -->

            <!-- <script>
                var oTxt = document.querySelector('input')
                var ul = document.querySelector('main ul')

                function show(res) {
                    if (!res.g) return
                    ul.innerHTML = ''
                    var arr = res.g

                    arr.forEach(ele => {
                        var str = `<li>${ele.id}</li>`

                        ul.innerHTML += str
                    })
                }

                oTxt.addEventListener('input', function () {
                    
                    // console.log(oTxt)
                    var script = document.createElement('script')

                    script.src = '../html/list.html'+oTxt.value+'&cb=show'

                    document.body.appendChild(script)
                })
            </script>  -->
</body>
</html>